<template>
  <div class="container">
    <div class="container">
      <template v-if="isLoaded">
        <van-uploader
          :deletable="false"
          :after-read="afterRead"
          :before-read="beforeRead"
        >
          <div class="avatar">
            <img :src="userInfo.avatar" alt="用户头像" />
            <div class="title">头像</div>
          </div>
        </van-uploader>

        <div class="welcome">欢迎您</div>
        <van-button type="danger" size="large" class="btn" @click="doLogout"
          >退出登录</van-button
        >
      </template>
      <template v-else>
        <van-field
          v-model="username"
          label="用户名"
          placeholder="请输入5-16位用户名"
        />
        <van-field
          v-model="password"
          label="密码"
          placeholder="请输入6-16位密码"
          type="password"
        />
        <van-button type="info" size="large" class="btn" @click="doLogin"
          >立即登录</van-button
        >
      </template>
    </div>
  </div>
</template>

<script>
import { Field, Button, Uploader, Toast } from "vant";
export default {
  name: "Personal",
  data() {
    return {
      isLoaded: this.$store.state.userInfo ? true : false,
      userInfo: this.$store.state.userInfo ? this.$store.state.userInfo : {},
      username: "",
      password: "",
    };
  },
  methods: {
			doLogin() {
				// 假设登录状态的保持有有效期，前端利用时间戳计算失效时间
				// 之后每次查缓存时候不止查是否存在，同时比较查询时的时间戳和deadline的大小看是否超时 
				// 如果查询时间戳>deadline 表示登录态已超时 此时清空登录态 重新让用户登录
				const now = new Date().getTime() //获取当前时间戳
				const deadline = now + 1000 * 60 * 60 * 24 //如果缓存有时效性 把失效时间戳同时存储
				
				// 构造需要存储的用户信息，此时头像用默认头像
				const userInfo = {
					avatar: require('../assets/images/01.jpg'), //本地图片路径引入
					username: this.username,
					deadline: deadline
				}
				// 存缓存
				localStorage.setItem('userInfo', JSON.stringify(userInfo))
				// VUEX中同步保持
				this.$store.commit('setUserInfo', userInfo)

				// 重置信息
				this.username = ''
				this.password = ''
				this.isLoaded = true
				this.userInfo = userInfo
			},
			doLogout() {
				// 移除缓存
				localStorage.removeItem('userInfo')
				// VUEX中同步移除
				this.$store.commit('removeUserInfo')

				this.isLoaded = false
				this.userInfo = {}
			},
			// 文件读取前的回调函数，返回 false 可终止文件读取 
			beforeRead(file) {
				console.log(file)
				// 格式验证
				if (file.type.toLowerCase() !== 'image/jpeg' && file.type.toLowerCase() !== 'image/png') {
					Toast('请上传 jpg/png 格式图片')
					return false;
				}
				// 尺寸验证
				// 300kb size= 300*1024 = 307200
				if (file.size > 307200) {
					Toast('请上传不超过300kb的图片')
					return false
				}
				return true;
			},
			// 文件读取完成后的回调函数 
			afterRead(file) {
				// 将头像设置为 file.content
				this.userInfo.avatar = file.content
				// 修改缓存
				localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
				// 修改VUEX
				this.$store.commit('setUserInfo', this.userInfo)
			}
		},
  components: {
    [Field.name]: Field,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
}

.avatar {
  position: relative;
}

.avatar img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.avatar .title {
  color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.welcome {
  font-size: 18px;
  color: #646566;
  font-weight: 600;
  margin: 20px 0 20px 0;
}

.btn {
  border-radius: 30px;
}
</style>